import { useState } from "react";
import TitlePublic from "@/components/title-public/index";
import { mockData } from "./mock-data";
import "./index.scss";
export default function DevelopmentHistory() {
  const [currentItem, setCurrentItem] = useState(mockData[0].yearConten);
  const [currentIndex, setCurrentIndex] = useState(0);
  const handleItemClick = (item, index) => {
    // console.log(item, "666666666666");
    setCurrentItem(item);
    setCurrentIndex(index);
  };
  return (
    <div>
      <TitlePublic englishTitle="Development History" chineseTitle="发展历程" />

      <div className="development-history-area">
        <ul className="year-area">
          {mockData?.map((item, index) => {
            return (
              <li
                key={item.id}
                className={`year-area-li ${
                  currentIndex === index ? "active" : ""
                }`}
                onClick={() => handleItemClick(item.yearConten, index)}
              >
                <h4>{item.year}</h4>
                <div className="circle"></div>
              </li>
            );
          })}
        </ul>
      </div>
      <ul className="item-ul-detail">
        {currentItem?.map((i, index) => {
          return (
            <li key={index} className="year-area-li-ul">
              <div className="left_text">{i?.title}</div>
              <img src={i?.imgUrl} alt="" />
            </li>
          );
        })}
      </ul>
    </div>
  );
}
